<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放</title>
    <style>
        *{
            --width:1000px; 
            --boxWidth: 1015px;
            --boxHeight:615px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins',sans-serif;
        }
        body{
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #1d2b3a;
        }

        .box{            
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: var(--boxWidth);
            height: var(--boxHeight);
            border-radius: 20px;
            border-top: 1px solid rgba(255,255,255,.5);
            border-left: 1px solid rgba(255,255,255,.5);
            border-bottom: 1px solid rgba(255,255,255,.2);
            border-right: 1px solid rgba(255,255,255,.2);
            /* 允许您将图形效果（例如模糊或颜色转换）应用到元素后面的区域。因为它适用于元素后面的所有内容，
            所以要查看效果，您必须使元素或其背景至少部分透明。backdrop-filter */
            /* 模糊 */
            backdrop-filter: blur(10px);
            background: rgba(50,50,50,.2);
        }
        .inputBox{
            position: relative;
            width: var(--width);
        }
        .inputBox video{
            width: 100%;
            height: 100%;
            object-fit: fill
        }
        header {
            position: absolute;
            top: 0;
            text-decoration: none;
            color: #999;
        }
        button{
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            width: 120px;
            height: 35px;
            bottom: 1px solid rgba(33,62,80,.8);
            background: rgba(33,62,80,.5);
            color: rgba(255,255,255,.9);
            border-radius: 5px;
            transition: 0.2s;
        }
    </style>
</head>
<body>
    <header style="clear: both;">
        不会改控制栏,加了几个功能按钮 &copy; :·.
    </header>

    <!-- 调倍速,进页面f12输入代码 -->
    <!-- 2倍速，要其他倍速就改数字，(0.075-16) -->
    <!-- document.querySelector('video').playbackRate=2 -->

    <div class="box">
        <div class="inputBox">
            <video src="../../培训/学校资源/JavaScript基础-day09/视频/20220621_165754.mp4" controls class="video" loop></video>
            <button class="btnLoop">循环播放</button>
            <button class="btnNoVolume">静音</button>
            <button class="White">开灯</button>
            <button class="speed">一倍速</button>
        </div>
    </div>

    <script>
        // 取对象
        var body = document.querySelector('body')
        var video = document.querySelector('.video');
        var btnLoop = document.querySelector('.btnLoop');
        var btnNoVolume = document.querySelector('.btnNoVolume');
        var White = document.querySelector('.White');
        var speed = document.querySelector('.speed');
        var colorFlag = false;//颜色标，true为白色，false为黑色


        // 默认设置
        // 修改音量
        video.volume = 0.15;
        // 默认不循环
        video.loop = !video.loop

        //功能
        btnLoop.addEventListener('click', function() {
            video.loop = !video.loop
            if(video.loop){
                btnLoop.innerHTML = '循环播放√'
            }else{
                btnLoop.innerHTML = '循环播放'
            }
        })

        btnNoVolume.addEventListener('click', function() {
            if(video.volume){
                video.volume = 0;
                btnNoVolume.innerHTML = '静音√'
            }else{
                video.volume = 0.15;
                btnNoVolume.innerHTML = '静音'
            }
        })

        White.addEventListener('click', function() {
            colorFlag = !colorFlag
            if(colorFlag){
                body.style.backgroundColor = 'white';
                White.innerHTML = '关灯'
            }else{
                body.style.backgroundColor = '#1d2b3a';
                White.innerHTML = '开灯'
            }
        })
        
        speed.addEventListener('click', function() {
            if(video.playbackRate === 1){
                speed.innerHTML = '1.5倍速';
                video.playbackRate = 1.5;
            }else if(video.playbackRate === 1.5){
                speed.innerHTML = '二倍速';
                video.playbackRate = 2;
            }else if(video.playbackRate === 2){
                speed.innerHTML = '三倍速';
                video.playbackRate = 3;
            }else if(video.playbackRate === 3){
                speed.innerHTML = '0.5倍速';
                video.playbackRate = 0.5;
            }else {
                speed.innerHTML = '一倍速';
                video.playbackRate = 1;
            }
        })
    </script>
</body>
</html>